<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务配置表单 - 竖直布局</title>
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <link rel="stylesheet" href="css/create_task_config.css">
    <style>
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>任务配置中心</h1>
        </div>

        <div id="task-config-form" class="task-config-form">
            <div class="layui-form" id="task_config" lay-filter="task-form">
                <!-- 任务基本信息 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-form"></i> 基础配置
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务名称
                                <span class="help-icon" data-tooltip="任务的唯一标识符，用于区分不同任务。建议使用有意义的英文名称，如 monitor_real_time_logs。">i</span>
                                <span class="badge badge-required">必填</span>
                            </label>
                            <div class="layui-input-block">
                                <input type="text" name="name" placeholder="请输入任务名称" class="layui-input" value="monitor_real_time_logs">
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行命令 
                                <span class="help-icon" data-tooltip="任务的唯一标识符，用于区分不同任务。建议使用有意义的英文名称，如 monitor_real_time_logs。">i</span>
                                <span class="badge badge-required">必填</span>
                            </label>
                
                            <div class="layui-input-block">
                                <textarea name="command" placeholder="请输入执行命令" class="layui-textarea">timeout 60 tail -f /var/log/syslog</textarea>
                            </div> 
                        </div>
                        
               
                        <div class="layui-form-item">
                            <label class="layui-form-label">命令类型</label>
                            <div class="layui-input-block">
                                <select name="command_type" id="command-type" lay-filter="commandTypeSelect">
                                    <option value="auto">auto (自动检测)</option>
                                    <option value="normal">normal (普通)</option>
                                    <option value="streaming" selected>streaming (流式)</option>
                                    <option value="long_running">long_running (长时间运行)</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">执行模式</label>
                            <div class="layui-input-block">
                                <select name="mode">
                                    <option value="serial">serial (串行)</option>
                                    <option value="parallel" selected>parallel (并行)</option>
                                </select>
                                <div class="info-text">默认: serial</div>
                            </div>
                        </div>
                        

                        <div class="layui-form-item">
                            <label class="layui-form-label">超时时间</label>
                            <div class="layui-input-block">
                                <input type="number" name="timeout" placeholder="请输入超时时间(秒)" class="layui-input" value="10">
                                <div class="info-text">默认: 30秒</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 主机与目标配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-engine"></i> 主机列表
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <div id="hosts-container">
                                    <div class="array-item">
                                        <input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input" value="web-server-01">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                    <div class="array-item">
                                        <input type="text" name="hosts[]" placeholder="请输入主机名称" class="layui-input" value="api-server-01">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary" id="add-host" style="margin-top: 10px;">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加主机
                                </button>
                                <div class="info-text">默认为所有主机</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 输出验证配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-circle"></i> 输出验证
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">期望输出</label>
                            <div class="layui-input-block">
                                <div id="expected-container">
                                    <div class="array-item">
                                        <input type="text" name="expected[]" placeholder="请输入期望输出" class="layui-input" value="active (running)">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary" id="add-expected" style="margin-top: 10px;">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加期望输出
                                </button>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">不期望输出</label>
                            <div class="layui-input-block">
                                <div id="unexpected-container">
                                    <div class="array-item">
                                        <input type="text" name="unexpected[]" placeholder="请输入不期望输出" class="layui-input" value="failed">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary" id="add-unexpected" style="margin-top: 10px;">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加不期望输出
                                </button>
                                <div class="info-text"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 任务依赖配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-link"></i> 依赖关系
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <label class="layui-form-label">依赖任务</label>
                            <div class="layui-input-block">
                                <div id="depends-container">
                                    <div class="array-item">
                                        <input type="text" name="depends_on[]" placeholder="请输入依赖任务名称" class="layui-input" value="restart_nginx_service">
                                        <button type="button" class="layui-btn layui-btn-danger remove-item"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                                    </div>
                                </div>
                                <button type="button" class="layui-btn layui-btn-primary" id="add-depends" style="margin-top: 10px;">
                                    <i class="layui-icon layui-icon-add-1"></i> 添加依赖任务
                                </button>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">允许失败</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="allow_failure" lay-skin="switch" lay-text="是|否" checked>
                                <div class="info-text">允许任务失败而不中断流程</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 交互配置 -->
                <div class="card">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-service"></i> 交互响应
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div id="interactive-container">
                                <div class="interactive-block">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">提示词</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="interactive_prompt[]" placeholder="例如: Password:" class="layui-input" value="Password:">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">响应内容</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="interactive_response[]" placeholder="例如: root" class="layui-input" value="root">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">响应次数</label>
                                        <div class="layui-input-block">
                                            <input type="number" name="interactive_times[]" placeholder="例如: 1" class="layui-input" value="1">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-block">
                                            <button type="button" class="layui-btn layui-btn-danger remove-interactive"><i class="layui-icon layui-icon-delete"></i> 删除此响应</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="button" class="layui-btn layui-btn-primary" id="add-interactive" style="margin-top: 10px;">
                                <i class="layui-icon layui-icon-add-1"></i> 添加交互响应
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 流式配置 -->
                <div class="card" id="streaming-config">
                    <div class="card-header">
                        <i class="layui-icon layui-icon-chart-screen"></i> 流式处理配置 
                    </div>
                    <div class="card-body">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">最大执行时间</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="max_duration" placeholder="秒" class="layui-input" value="30">
                                </div>
                                <div class="layui-form-mid">秒</div>
                            </div>
                            
                            <div class="layui-inline">
                                <label class="layui-form-label">无输出超时</label>
                                <div class="layui-input-inline">
                                    <input type="number" name="line_timeout" placeholder="秒" class="layui-input" value="10">
                                </div>
                                <div class="layui-form-mid">秒</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">显示实时输出</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="show_realtime" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                            
                            <div class="layui-inline">
                                <label class="layui-form-label">记录到文件</label>
                                <div class="layui-input-inline">
                                    <input type="checkbox" name="write_to_file" lay-skin="switch" lay-text="是|否" checked>
                                </div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">继承Shell</label>
                            <div class="layui-input-block">
                                <input type="text" name="shell_inherit_task" placeholder="输入来源的Task名" class="layui-input">
                                <div class="info-text">继承其他任务创建的Shell环境</div>
                            </div>
                        </div>
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">Shell销毁</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="shell_destroy" lay-skin="switch" lay-text="是|否">
                                <div class="info-text">任务结束后销毁Shell，后续任务无法继承</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 表单操作按钮 -->
                <div class="actions">
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-normal" id="submit-btn" style="width: 220px;">
                        <i class="layui-icon layui-icon-release"></i> 提交配置
                    </button>
                    <button type="button" class="layui-btn layui-btn-lg layui-btn-primary" id="reset-btn" style="width: 220px; margin-left: 20px;">
                        <i class="layui-icon layui-icon-refresh"></i> 重置表单
                    </button>
                </div>
            </div>
        </div>

    </div>

    <script src="assets/layui/layui.js"></script>
    <script src="js/create_task_config.js">  </script>
</body>
</html>